<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约挂号功能页</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style type="text/css">
        #tou{
            border: 1px orange solid;
            width: 1000px;
            height: 50px;
            background-color: #00F7DE;
            margin: auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            <!-- 科室的查询 -->
            $.ajax({
                url: "/getDepartment",
                type: "GET",
                dataType: "json",
                success: function(departmentList){
                    showDepartment(departmentList);
                },
                error:function(departmentList){
                    alert("科室查询失败！");
                }
            });
        })
        function showDepartment(departmentList){
            alert("科室查询成功");
            var str = "";
            for (var i = 0; i < departmentList.length; i++) {
                str += "<option value='"+departmentList[i].departmentId+"'>" + departmentList[i].departmentName +"</option>";
            }
            $("#city").append(str);
        }
        <!-- 医生的查询 -->
        $(function (){
            $("#area").one("click",function (){
                 /*alert("获得科室id为:"+$('#city').val());*/
                $.ajax({
                    url: "/getDoctorByDepartmentId",
                    type: "GET",
                    /*此处的key名 <==> 实体类属性,使用数据库字段名出错*/
                    data: {
                        "departmentId":$('#city').val()
                    },
                    dataType: "json",
                    success: function(doctorList){
                        showDoctor(doctorList);
                    },
                    error:function(doctorList){
                        alert("医生查询失败！");
                    }
                });
            });
        });
        function showDoctor(doctorList){
            /*alert("传入科室ID数据:"+$('#city').val());*/
            alert("医生查询成功");
            var str = "";
            for (var i = 0; i < doctorList.length; i++) {
                str += "<option value='"+doctorList[i].dId+"'>" + doctorList[i].dName +"</option>";
            }
            $("#area").append(str);
        }
        $(function (){
            $("#button").one("click",function (){
                alert("进入预约成功");
                /*alert("获得科室id为:"+$('#city').val());*/
                $.ajax({
                    url: "/doBooking",
                    type: "GET",
                    /*此处的key名 <==> 实体类属性,使用数据库字段名出错*/
                    data: {
                        "workforcesDepartment":$('#city').val(),
                        "workforcesDoctor":$('#area').val()
                    },
                    dataType: "json",
                    success(resultMap){
                        alert("挂号成功");
                    },
                    error(){
                        alert("挂号失败");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="tou">
        <form th:action="@{#}" onsubmit="return false;">
                <select id="city">
                    <option>---请选择所在科室---</option>
                </select>
                <select id="area">
                    <option>---请选择医生---</option>
                </select>
            <input type="button" onclick="register()" name="button" id="button" value="预约挂号">
        </form>
    </div>
</body>
</html>